<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    App 组件中
    <hr>
    <father></father>
  </div>

  <script src="./lib/vue.global.js"></script>
  <script>

    // 父组件选项
    const fatherOptions = {
      template: `
        <div class="father">
          <div>这是父组件中的内容</div>
          <hr />
          <!-- 渲染子组件 -->
          <son username="admin" password="123456"></son>
          <son password="123456" :age="18" sex="牛"></son>
        </div>
      `,
      data() {
        return {
          message: 'father',
        }
      },
    }

    // 子组件选项
    const sonOptions = {
      template: `
        <div class="son">
          <div>这是子组件中的内容</div>
          <div>接收到的数据, username: {{ username }}, password: {{password}}</div>
        </div>
      `,
      // props: ['username', 'password', 'age', 'sex'], // 声明可接收属性的名称信息
      props: { // 定义成对象，可实现属性数据校验
        username: {
          type: String, // 类型
          required: true, // 必传
        },
        password: {
          type: String,
        },
        age: {
          type: Number,
          default: 18, // 默认值，如果是基本类型，则直接书写默认值，如果是引用类型，则使用工厂函数返回默认值
        },
        sex: {
          type: String,
          validator(val) { // 自定义校验规则
            console.log('校验 sex', val)
            if (val === '男' || val === '女') {
              return true
            }

            return false
          },
        },
      },
    }

    // 根组件
    const app = Vue.createApp({
      data() {
        return {
          message: 'app'
        }
      },
    })

    // 全局注册组件
    app.component('father', fatherOptions)
    app.component('son', sonOptions)

    app.mount('#app')
  </script>
</body>
</html>